<template>
  <div class="header_margin-top">
    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel course">{{ article.channelname}}</h2>
        <h1 class="pos-abs">{{ article.title }}</h1>
      </div>
      <!-- <a href="javascript:void()" @click="$router.go(-1)" class="fxr return">返回</a> -->
      <div class="clear h10"></div>
      <div v-if="attachment != null">
        加载进度: {{ pdf_loading_progress * 100 }} %
        &nbsp;
        <button @click="prePage">上一页</button>&nbsp;&nbsp;
        {{currentPage}} / {{pageCount}}&nbsp;&nbsp;
        <button @click="nextPage">下一页</button>
        
        <pdf ref="pdf" :src="attachment" @progress="progress" :page="currentPage" @num-pages="pageCount=$event"/>
        <a :href="attachment">下载</a>
        
      </div>
      <div class="showHtml box-shadow rad5" v-html="html" v-if="html != null"></div>
      <div class="r-top rad5" @click="$router.go(-1)">
        <i class="iconfont icon-fanhuidingbu"></i>
        <a>返回上级</a>
      </div>
      <!-- <el-tooltip placement="top" content="返回顶部">
        <back-to-top
            transitionName="fade"
            :customStyle="myBackToTopStyle"
            :visibilityHeight="300"
            :backPosition="50">
        </back-to-top>
      </el-tooltip>-->
    </div>
  </div>
</template>

<script>
// import BackToTop from './BackToTop'
import _http from "../httpService";
import pdf from "vue-pdf";

export default {
  name: "Detail",
  props: {
    msg: String,
  },
  components: {
    // BackToTop,
    pdf,
  },
  data() {
    return {
      currentPage: 1,
      pageCount: 0,
      myBackToTopStyle: {
        right: "100px",
        bottom: "150px",
        width: "40px",
        height: "40px",
        "border-radius": "20px",
        "line-height": "40px",
        background: "#fff",
      },
      attachment: null,
      html: null,
      article: {
        channelname: ""
      },
      pdf_loading_progress: 0.0,
    };
  },

  created() {
    _http
      .get("/content/jcContent/queryById?id=" + this.$route.params.id)
      .then((resp) => {
        if (resp.data.success) {
          this.article = resp.data.result;
          console.log(resp.data.result);
          this.html = resp.data.result.content;
          this.attachment = resp.data.result.attachment;

          console.log(this.html);
        } else this.html = "<h1>文章正在读取中...</h1>";
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  },

  methods: {
    prePage() {
      if(this.currentPage > 1)
      this.currentPage--;
    },

    nextPage() {
      if(this.currentPage < this.pageCount)
        this.currentPage++;
    },

    progress(number) {
      this.pdf_loading_progress = number.toFixed(2)
    },
    backToTop() {
      let distanceY = window.pageYOffset;
      let i = 0;
      this.interval = setInterval(() => {
        let next = Math.floor(
          this.easeInOutQuad(10 * i, distanceY, -distanceY, 500)
        );
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition);
          clearInterval(this.interval);
        } else {
          window.scrollTo(0, next);
        }
        i++;
      }, 17);
    },
  },

  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route() {
      if (this.$route.params.id != undefined) {
        _http
          .get("/content/jcContent/queryById?id=" + this.$route.params.id)
          .then((resp) => {
            if (resp.data.success) {
              this.article = resp.data.result;
              if (
                this.article.channelname == "住院科室" ||
                this.article.channelname == "门诊科室" ||
                this.article.channelname == "辅诊科室"
              )
                this.article.title = "科室介绍";

              this.html = resp.data.result.content;
              this.attachment = resp.data.result.attachment;

              console.log(this.html);
            } else this.html = "<h1>文章正在读取中...</h1>";
          })
          .catch((error) => console.log(error))
          .finally(() => (this.loading = false));
      }
    },
    immediate: true,
  },
};
</script>

<style>
a.return {
  font: normal 12px/30px "Microsoft YaHei";
  color: #0fb4b6;
}

.r-top {
  cursor: pointer;
  color: #0fb4b6;
  text-align: center;
  margin-left: 580px;
  background: rgba(239, 252, 248, 0.99);
  padding: 10px;
  font-size: 16px;
  margin: 40px 0px 20px 20px;
}

a.return:hover {
  color: #753f37;
}

.showHtml {
  border: 1px solid #d6e2df;
  background: #fffefc;
  padding: 30px 22px;
  text-align: left;
}

</style>
